<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f5f5dc;
            margin: 0;
            padding: 20px;
        }
        
        h1 {
            color: #8B4513;
            margin-bottom: 10px;
        }
        
        .game-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
        }
        
        .game-info {
            margin-bottom: 15px;
            font-size: 18px;
            color: #333;
        }
        
        #board {
            background-color: #DEB887;
            border: 2px solid #8B4513;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }
        
        .controls {
            margin-top: 20px;
            display: flex;
            gap: 15px;
        }
        
        button {
            padding: 8px 15px;
            background-color: #8B4513;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #A0522D;
        }
        
        .win-message {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 20px 40px;
            border-radius: 10px;
            font-size: 24px;
            display: none;
            z-index: 100;
        }
    </style>
</head>
<body>
    <h1>五子棋游戏</h1>
    
    <div class="game-container">
        <div class="game-info">
            当前玩家: <span id="current-player">黑棋</span>
        </div>
        <canvas id="board" width="450" height="450"></canvas>
        
        <div class="controls">
            <button id="restart-btn">重新开始</button>
            <button id="undo-btn">悔棋</button>
        </div>
    </div>
    
    <div class="win-message" id="win-message"></div>
    
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const canvas = document.getElementById('board');
            const ctx = canvas.getContext('2d');
            const currentPlayerDisplay = document.getElementById('current-player');
            const restartBtn = document.getElementById('restart-btn');
            const undoBtn = document.getElementById('undo-btn');
            const winMessage = document.getElementById('win-message');
            
            const BOARD_SIZE = 15;
            const CELL_SIZE = canvas.width / BOARD_SIZE;
            const PIECE_RADIUS = CELL_SIZE * 0.4;
            
            let board = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));
            let currentPlayer = 1; // 1 为黑棋，2 为白棋
            let gameOver = false;
            let moveHistory = [];
            
            // 初始化棋盘
            function initBoard() {
                drawBoard();
                drawPieces();
                updateCurrentPlayerDisplay();
            }
            
            // 绘制棋盘
            function drawBoard() {
                ctx.fillStyle = '#DEB887';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                ctx.strokeStyle = '#000';
                ctx.lineWidth = 1;
                
                // 绘制横线
                for (let i = 0; i < BOARD_SIZE; i++) {
                    ctx.beginPath();
                    ctx.moveTo(CELL_SIZE / 2, i * CELL_SIZE + CELL_SIZE / 2);
                    ctx.lineTo(canvas.width - CELL_SIZE / 2, i * CELL_SIZE + CELL_SIZE / 2);
                    ctx.stroke();
                }
                
                // 绘制竖线
                for (let i = 0; i < BOARD_SIZE; i++) {
                    ctx.beginPath();
                    ctx.moveTo(i * CELL_SIZE + CELL_SIZE / 2, CELL_SIZE / 2);
                    ctx.lineTo(i * CELL_SIZE + CELL_SIZE / 2, canvas.height - CELL_SIZE / 2);
                    ctx.stroke();
                }
                
                // 绘制五个星位点
                const starPoints = [3, 7, 11];
                ctx.fillStyle = '#000';
                starPoints.forEach(x => {
                    starPoints.forEach(y => {
                        ctx.beginPath();
                        ctx.arc(
                            x * CELL_SIZE + CELL_SIZE / 2,
                            y * CELL_SIZE + CELL_SIZE / 2,
                            CELL_SIZE * 0.1,
                            0,
                            Math.PI * 2
                        );
                        ctx.fill();
                    });
                });
            }
            
            // 绘制所有棋子
            function drawPieces() {
                for (let y = 0; y < BOARD_SIZE; y++) {
                    for (let x = 0; x < BOARD_SIZE; x++) {
                        if (board[y][x] !== 0) {
                            drawPiece(x, y, board[y][x]);
                        }
                    }
                }
            }
            
            // 绘制单个棋子
            function drawPiece(x, y, player) {
                const centerX = x * CELL_SIZE + CELL_SIZE / 2;
                const centerY = y * CELL_SIZE + CELL_SIZE / 2;
                
                // 棋子渐变效果
                const gradient = ctx.createRadialGradient(
                    centerX - PIECE_RADIUS * 0.3,
                    centerY - PIECE_RADIUS * 0.3,
                    PIECE_RADIUS * 0.1,
                    centerX,
                    centerY,
                    PIECE_RADIUS
                );
                
                if (player === 1) {
                    gradient.addColorStop(0, '#666');
                    gradient.addColorStop(1, '#000');
                } else {
                    gradient.addColorStop(0, '#fff');
                    gradient.addColorStop(1, '#ddd');
                }
                
                ctx.fillStyle = gradient;
                ctx.beginPath();
                ctx.arc(centerX, centerY, PIECE_RADIUS, 0, Math.PI * 2);
                ctx.fill();
                
                // 棋子高光效果
                if (player === 1) {
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
                } else {
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
                }
                ctx.beginPath();
                ctx.arc(
                    centerX - PIECE_RADIUS * 0.3,
                    centerY - PIECE_RADIUS * 0.3,
                    PIECE_RADIUS * 0.2,
                    0,
                    Math.PI * 2
                );
                ctx.fill();
            }
            
            // 更新当前玩家显示
            function updateCurrentPlayerDisplay() {
                currentPlayerDisplay.textContent = currentPlayer === 1 ? '黑棋' : '白棋';
                currentPlayerDisplay.style.color = currentPlayer === 1 ? 'black' : '#555';
            }
            
            // 检查是否获胜
            function checkWin(x, y, player) {
                const directions = [
                    [1, 0],   // 水平
                    [0, 1],   // 垂直
                    [1, 1],   // 对角线
                    [1, -1]   // 反对角线
                ];
                
                for (const [dx, dy] of directions) {
                    let count = 1;
                    
                    // 正向检查
                    for (let i = 1; i < 5; i++) {
                        const nx = x + i * dx;
                        const ny = y + i * dy;
                        if (nx >= 0 && nx < BOARD_SIZE && ny >= 0 && ny < BOARD_SIZE && board[ny][nx] === player) {
                            count++;
                        } else {
                            break;
                        }
                    }
                    
                    // 反向检查
                    for (let i = 1; i < 5; i++) {
                        const nx = x - i * dx;
                        const ny = y - i * dy;
                        if (nx >= 0 && nx < BOARD_SIZE && ny >= 0 && ny < BOARD_SIZE && board[ny][nx] === player) {
                            count++;
                        } else {
                            break;
                        }
                    }
                    
                    if (count >= 5) {
                        return true;
                    }
                }
                
                return false;
            }
            
            // 处理棋盘点击
            function handleClick(event) {
                if (gameOver) return;
                
                const rect = canvas.getBoundingClientRect();
                const x = Math.floor((event.clientX - rect.left) / CELL_SIZE);
                const y = Math.floor((event.clientY - rect.top) / CELL_SIZE);
                
                // 检查位置是否有效
                if (x >= 0 && x < BOARD_SIZE && y >= 0 && y < BOARD_SIZE && board[y][x] === 0) {
                    // 记录移动历史用于悔棋
                    moveHistory.push({x, y, player: currentPlayer});
                    
                    // 放置棋子
                    board[y][x] = currentPlayer;
                    drawPiece(x, y, currentPlayer);
                    
                    // 检查胜利
                    if (checkWin(x, y, currentPlayer)) {
                        gameOver = true;
                        const winner = currentPlayer === 1 ? '黑棋' : '白棋';
                        winMessage.textContent = `${winner}获胜！`;
                        winMessage.style.display = 'block';
                        setTimeout(() => {
                            winMessage.style.display = 'none';
                        }, 2000);
                        return;
                    }
                    
                    // 切换玩家
                    currentPlayer = currentPlayer === 1 ? 2 : 1;
                    updateCurrentPlayerDisplay();
                }
            }
            
            // 重新开始游戏
            function restartGame() {
                board = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));
                currentPlayer = 1;
                gameOver = false;
                moveHistory = [];
                initBoard();
            }
            
            // 悔棋
            function undoMove() {
                if (gameOver || moveHistory.length === 0) return;
                
                const lastMove = moveHistory.pop();
                board[lastMove.y][lastMove.x] = 0;
                currentPlayer = lastMove.player;
                
                // 重绘整个棋盘
                drawBoard();
                drawPieces();
                updateCurrentPlayerDisplay();
            }
            
            // 事件监听
            canvas.addEventListener('click', handleClick);
            restartBtn.addEventListener('click', restartGame);
            undoBtn.addEventListener('click', undoMove);
            
            // 初始化游戏
            initBoard();
        });
    </script>
</body>
</html>
